<template>
	<view class="container" v-if="isLoading">
		<view class="part">
			<view class="partTit">发货信息</view>
			<view class="cell flex-b">
				<view class="hd"><text style="color: red;">*</text>整车重量</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="digit" v-model="form.totalVehicleWeight" placeholder="请输入"
						placeholder-style="color: #ACAFBF">
					<text style="color: #3F4151; margin-left: 20rpx;">吨</text>
				</view>
			</view>
			<view class="cell flex-b" style="padding-right: 10rpx;">
				<view class="hd">装货时间</view>
				<view class="bd flex-ac">
					<input v-model="order.loadingTime" style="flex: 1;" type="text" placeholder="请选择" disabled
						placeholder-style="color: #ACAFBF">
					<image src="../../../static/img/yjt.png" mode=""></image>
				</view>
			</view>
			<view class="cell flex-b" style="padding-right: 10rpx;">
				<view class="hd">预计到达时间</view>
				<view class="bd flex-ac">
					<input v-model="order.predictArriveTime" style="flex: 1;" type="text" placeholder="请选择" disabled
						placeholder-style="color: #ACAFBF">
					<image src="../../../static/img/yjt.png" mode=""></image>
				</view>
			</view>
			<view class="cell flex-b">
				<view class="hd"><text style="color: red;">*</text>发货数量</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="digit" v-model="form.sendNum" placeholder="请输入"
						placeholder-style="color: #ACAFBF">
					<text style="color: #3F4151; margin-left: 20rpx;">吨</text>
				</view>
			</view>
			<u-picker mode="time" title="选择时间" v-model="show" :params="params" @confirm="chooseTime" confirm-color="#3db020"></u-picker>
			
			<view class="cell" style="border: none;">
				<view class="hd">装货图片</view>
				<u-gap height="30"></u-gap>
				<view class="imageBox flex-wrap">
					<view class="imageItem" v-for="(item,index) in images" :key="index" @click="$Common.viewImage(images, index)">
						<image class="image" :src="item" mode=""></image>
						<image src="../../../static/img/del.png" class="del" @click.stop="delImage(index, 1)" mode="aspectFill"></image>
					</view>
					<view class="imageItem" @click="chooseImg(1)" v-if="images.length < 10">
						<image class="image" src="../../../static/img/upload.png" mode=""></image>
						<view class="text">点击上传</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="part">
			<view class="partTit">收货信息</view>
			<view class="cell flex-b" style="padding-right: 10rpx;">
				<view class="hd"><text style="color: red;">*</text>到达时间</view>
				<view class="bd flex-ac">
					<input v-model="order.arrivalTime" style="flex: 1;" type="text" placeholder="请选择" disabled
						placeholder-style="color: #ACAFBF">
					<image src="../../../static/img/yjt.png" mode=""></image>
				</view>
			</view>
			<view class="cell flex-b">
				<view class="hd"><text style="color: red;">*</text>收货数量</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="digit" v-model="form.receiveNum" placeholder="请输入"
						placeholder-style="color: #ACAFBF">
					<text style="color: #3F4151; margin-left: 20rpx;">吨</text>
				</view>
			</view>
			<u-picker mode="time" title="选择时间" v-model="show" :params="params" @confirm="chooseTime" confirm-color="#3db020"></u-picker>
			
			<view class="cell" style="border: none;">
				<view class="hd">签单图片</view>
				<u-gap height="30"></u-gap>
				<view class="imageBox flex-wrap">
					<view class="imageItem" v-for="(item,index) in sign_images" :key="index" @click="$Common.viewImage(sign_images, index)">
						<image class="image" :src="item" mode=""></image>
						<image src="../../../static/img/del.png" class="del" @click.stop="delImage(index, 2)" mode="aspectFill"></image>
					</view>
					<view class="imageItem" @click="chooseImg(2)" v-if="sign_images.length < 10">
						<image class="image" src="../../../static/img/upload.png" mode=""></image>
						<view class="text">点击上传</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="part">
			<view class="partTit">费用信息</view>
			<view class="cell flex-b">
				<view class="hd">订单里程</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="digit" v-model="order.mileage" placeholder="请输入" disabled
						placeholder-style="color: #ACAFBF">
					<text style="color: #3F4151; margin-left: 20rpx;">KM</text>
				</view>
			</view>
			<view class="cell flex-b">
				<view class="hd"><text style="color: red;">*</text>车次实际里程</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="digit" v-model="form.actualMileage" placeholder="请输入"
						placeholder-style="color: #ACAFBF">
					<text style="color: #3F4151; margin-left: 20rpx;">KM</text>
				</view>
			</view>
			<view class="cell flex-b">
				<view class="hd">订单额定油耗</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="digit" v-model="order.oilConsum" placeholder="请输入" disabled
						placeholder-style="color: #ACAFBF">
					<text style="color: #3F4151; margin-left: 20rpx;">L</text>
				</view>
			</view>
			<view class="cell flex-b">
				<view class="hd"><text style="color: red;">*</text>车次实际油耗</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="digit" v-model="form.carOilConsum" placeholder="请输入"
						placeholder-style="color: #ACAFBF">
					<text style="color: #3F4151; margin-left: 20rpx;">L</text>
				</view>
			</view>
			<view class="cell flex-b">
				<view class="hd">油耗金额</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="digit" v-model="oilMoney" placeholder="请输入" disabled
						placeholder-style="color: #ACAFBF">
					<text style="color: #3F4151; margin-left: 20rpx;">元</text>
				</view>
			</view>
			<view class="cell flex-b">
				<view class="hd"><text style="color: red;">*</text>司机工资</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="digit" v-model="form.wagesAmount" placeholder="请输入"
						placeholder-style="color: #ACAFBF">
					<text style="color: #3F4151; margin-left: 20rpx;">元</text>
				</view>
			</view>
			<view class="cell flex-b">
				<view class="hd"><text style="color: red;">*</text>工资补贴</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="digit" v-model="form.allowanceAmount" placeholder="请输入"
						placeholder-style="color: #ACAFBF">
					<text style="color: #3F4151; margin-left: 20rpx;">元</text>
				</view>
			</view>
			<view class="cell flex-b">
				<view class="hd"><text style="color: red;">*</text>运费金额</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="digit" v-model="form.freightAmount" placeholder="请输入"
						placeholder-style="color: #ACAFBF">
					<text style="color: #3F4151; margin-left: 20rpx;">元</text>
				</view>
			</view>
			<view class="cell flex-b">
				<view class="hd">毛利</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="digit" v-model="maoli" placeholder="请输入" disabled
						placeholder-style="color: #ACAFBF">
					<text style="color: #3F4151; margin-left: 20rpx;">元</text>
				</view>
			</view>
			<view class="cell flex-b">
				<view class="hd">型号</view>
				<view class="bd flex-ac">
					<input style="flex: 1;" type="text" v-model="form.goodsModel" placeholder="请输入"
						placeholder-style="color: #ACAFBF">
				</view>
			</view>
			
		</view>

		<view class="foot" style="background-color: #f7f7f7;">
			<view class="btnBox flex-ac">
				<view class="btn middle" @click="sureAddGoods">确认</view>
			</view>
			<x-botSpace></x-botSpace>
		</view>
	</view>
</template>

<script>
	import config from '../../../utils/config.js'
	// 引入高德地图sdk
	// import amap from '@/utils/amap-wx.130.js';
	export default {
		data() {
			return {
				isLoading: false,
				id: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				form: {
					id:"",  // 运输单id
					actualMileage:"" ,  //车次实际里程
					allowanceAmount:"",  // 工资补贴
					carOilConsum:""  ,// 车次实际油耗
					freightAmount: '' ,// 运费金额
					goodsModel: '', // 型号
					loadImgUrls: '', // 装货图片
					receiveNum: '', //收货数量
					sendNum: "", // 发货数量
					signImgUrls: '', // 签单图片
					totalVehicleWeight: '', // 整车重量
					wagesAmount: '' // 司机工资
				},
				order: {}, //订单信息
				images: [],
				sign_images: [],
				// key: '485fb6f1651a73068ab5bd94ad428885',
				amapPlugin: '',
				// oilMoney: '', //油耗
				// maoli: ''
			}
		},
		onLoad(opt) {
			if (opt){
				console.log('opt:', opt)
				this.form.id = opt.id
				this.id = opt.id
				this.getOrderInfo(opt.id)
			}
			// var timestamp = Date.parse(new Date()) / 1000;
			// this.form.predictArriveTime = this.$Common.formatTime(timestamp, "Y-M-D h:m:s")
		},
		watch:{
			'form.actualMileage'(){
				this.js_ButieMoney()
			},
			'form.freightAmount'(){
				this.js_DriverMoney()
			}
		},
		computed:{
			oilMoney(){
				let price = this.form.carOilConsum * this.order.oilPrice 
				return price
			},
			maoli(){
				let price = this.form.freightAmount - this.form.wagesAmount - this.form.allowanceAmount - this.oilMoney
				return price
			}
		},
		methods: {
			
			chooseTime(e) {
				console.log('time:', e)
				this.form.predictArriveTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			// 确认装货
			sureAddGoods() {
				// if(this.city =='' || this.area == '') return this.$Toast.message('未获取到当前位置信息')
				if (this.form.num === '') return this.$Toast.message('请完善内容 ')
				if (this.form.actualMileage === '') return this.$Toast.message('请完善内容')
				if (this.form.allowanceAmount === '') return this.$Toast.message('请完善内容')
				if (this.form.carOilConsum === '') return this.$Toast.message('请完善内容')
				if (this.form.freightAmount === '') return this.$Toast.message('请完善内容')
				if (this.form.totalVehicleWeight === '') return this.$Toast.message('请完善内容')
				if (this.form.sendNum === '') return this.$Toast.message('请完善内容')
				if (this.form.receiveNum === '') return this.$Toast.message('请完善内容')
				if (this.images.length > 0) {
					this.form.loadImgUrls = this.images.toString()
				}else{
					return this.$Toast.message('请上传装货图片')
				}
				if (this.sign_images.length > 0) {
					this.form.signImgUrls = this.sign_images.toString()
				}else{
					return this.$Toast.message('请上传签单图片')
				}
				console.log('form:', this.form)
				this.$Net.post('/orderTransport/edit', this.form).then(res => {
					console.log('审核：', res)
					this.$Toast.messageIcon('操作成功')
					setTimeout(() => {
						this.$Jump.Back(1)
					}, 1500)
				})
			},
			// 获取订单信息  /driverApi/transportOrder/detail
			getOrderInfo(id) {
				this.$Net.get("/orderTransport/finalDetail/" + id).then(res=>{
					console.log("运单信息:", res)
					this.order = res.data
					this.form.sendNum = res.data.sendNum
					if(res.data.loadImgUrls) this.images = res.data.loadImgUrls.split(',')
					if(res.data.signImgUrls) this.sign_images = res.data.signImgUrls.split(',')
					this.form.receiveNum = res.data.receiveNum
					this.form.actualMileage = res.data.actualMileage  // 实际里程
					this.form.carOilConsum = res.data.carOilConsum // 实际油耗
					this.form.freightAmount = res.data.freightAmount // 运费
					this.form.totalVehicleWeight = res.data.totalVehicleWeight
					this.form.goodsModel = res.data.goodsModel
					this.js_DriverMoney()
					this.js_ButieMoney()
					this.isLoading = true
				})
			},
			js_DriverMoney(){
				if(this.order.wagesRatio) this.form.wagesAmount = (this.order.wagesRatio * this.form.freightAmount)/100
				else this.form.wagesAmount = 0
			},
			js_ButieMoney(){
				if(this.order.allowance) this.form.allowanceAmount = this.form.actualMileage * this.order.allowance
				else this.form.allowanceAmount = 0
			},
			// 删除图片
			delImage(index, type) {
				if(type == 1){
					this.images.splice(index, 1)
				}else{
					this.sign_images.splice(index, 1)
				}
			},
			//  选择图片
			chooseImg: function(type) {
				var that = this
				uni.chooseImage({
					count: 10 - this.images.length, // 默认9
					// sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
					sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
					success(res) {
						uni.showLoading({
							title: '上传中'
						});
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						let tempFilePaths = res.tempFilePaths;
						console.log('tempFilePaths:', tempFilePaths)
						tempFilePaths.map(el => {
							that.uploadImg(el, type)
						})
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '需要从您的相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},
			// 上传图片
			uploadImg(imageUrl, type) {
				return new Promise((resolve, reject) => {
					var that = this
					uni.uploadFile({ //上传
						url: config.BASE_URL + '/imgs/uploadImage',
						filePath: imageUrl,
						name: "picture",
						header: {
							'authorization': 'Bearer ' + uni.getStorageSync('token')
						},
						formData: {},
						success(res) {
							let data = JSON.parse(res.data)
							console.log('图片上传:', data)
							if(type == 1){
								that.images.push(data.data)
							}else{
								that.sign_images.push(data.data)
							}
							// that.imagesId.push(data.data.fileId)
							// console.log('images:', that.images)
							// console.log('imagesId:', that.imagesId)
						},
						fail(res) {
							reject(res); 
						},
						complete() {
							uni.hideLoading()
						}
					});
				})
			}
		}
	}
</script>
 
<style lang="scss">
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	@import './Edit.scss';
</style>